{% extends "../../../../../view/layouts/admin.html" %} {% block content %}
<header class="header navbar bg-white shadow">
	<div class="btn-group tool-button">
		<a class="btn btn-primary navbar-btn">短网址</a>
	</div>
</header>
<div class="box-tab" style="padding:10px;margin-top:50px;">

	<ul class="nav nav-tabs">
          <li><a href="/app/dwz/admin/index" data-pjax>网址列表</a>

          </li>
          <li class="active"><a  data-pjax>应用配置</a>
          </li>
        <div class="pull-right offscreen-right">
      <button class="btn-small btn-gray" style="margin:6px 10px" onclick="create()">生成配置
      </button>
    </div>
        </ul>
<div class="tab-content">
          <div class="tab-pane fade active in">
<div class=panel-body>
	<div class="table-responsive no-border">
		<input id="unitid" type="hidden">
		<table class="table table-bordered table-striped mg-t datatable">
			<thead>
				<tr>
					<th>ID</th>
					<th>appid</th>
					<th>appkey</th>
					<th>调用次数</th>
					<th>创建时间</th>
					<th>过期时间</th>
					<th>操作</th>
		</table>
	</div>
</div>
</div>

</div>
</div>

<div id="dialogDelete" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">删除</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12">
						删除后无法恢复，确定删除吗？ <br/>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				<button id="ok" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定</button>
			</div>
		</div>
	</div>
</div>

<div id="dialogCreate" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">生成秘钥</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12">
						确定生成新的调用秘钥吗？ <br/>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				<button id="ok" type="button" class="btn btn-primary" data-loading-text="正在生成...">确 定</button>
			</div>
		</div>
	</div>
</div>
<script language="JavaScript">
	var datatable;

	function initDatatable() {
		datatable = $('.datatable').DataTable({
			"dom": '<"toolbar">frtip',
			"searching": false,
			"processing": false,
			"serverSide": true,
			"select": true,
			"ordering": true,
			"language": {
				"url": "/assets/plugins/datatables/cn.json"
			},
			"preDrawCallback": function() {
				sublime.showLoadingbar($(".main-content"));
			},
			"drawCallback": function() {
				sublime.closeLoadingbar($(".main-content"));
			},
			"ajax": {
				"url": "/app/dwz/admin/setup",
				"type": "post",
				"data": function(d) {}
			},
			"order": [
				[0, "asc"]
			],
			"columns": [{
					"data": "id",
					"bSortable": true
				},
				{
					"data": "appid",
					"bSortable": true
				},
				{
					"data": "appkey",
					"bSortable": true
				},
				{
					"data": "times",
					"bSortable": true
				},
				{
					"data": "create_time",
					"bSortable": true
				},
				{
					"data": "expire_time",
					"bSortable": true
				}
			],
			"columnDefs": [
			{
					"render": function(data, type, row) {
						return sublime.datetime(data);
					},
					"targets": 4
				},
				{
					"render": function(data, type, row) {
						return sublime.datetime(data);
					},
					"targets": 5
				},
				{
					"render": function(data, type, row) {
					
						return '<div class="btn-group"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">' +
							' <i class="ti-settings"></i> <span class="ti-angle-down"></span></button><ul class="dropdown-menu" role="menu">' +
							'<li><a href="javascript:;" onclick="del(' + row.id + ')">删除</a></li>'+
							'<li><a href="javascript:;" onclick="changeTime(' + row.id + ')">延时</a></li>'+
							
							'</ul></div>';
					},
					"targets": 6
				}
			]
		});
		datatable.on('click', 'tr', function() {
			$(this).toggleClass('selected');
		});
		$("#searchBtn").on('click', function() {
			datatable.ajax.reload();
		});
	}

	function del(id) {
		var dialog = $("#dialogDelete");
		dialog.modal("show");
		dialog.find("#ok").unbind("click");
		dialog.find("#ok").bind("click", function(event) {
			var btn = $(this);
			btn.button("loading");
			$.post("/app/dwz/admin/delete", {id:id,model:'dwz_setup'}, function(data) {
				if(data.errno == 0) {
					datatable.ajax.reload(null, false);
				} else {
					Toast.error(data.errmsg);
				}
				//重置按钮状态，关闭提示框
				btn.button("reset");
				dialog.modal("hide");
			}, "json");
		});
	}
	function create() {
		var dialog = $("#dialogCreate");
		dialog.modal("show");
		dialog.find("#ok").unbind("click");
		dialog.find("#ok").bind("click", function(event) {
			var btn = $(this);
			btn.button("loading");
			$.post("/app/dwz/admin/create", {}, function(data) {
				if(data.errno == 0) {
					datatable.ajax.reload(null, false);
				} else {
					Toast.error(data.errmsg);
				}
				//重置按钮状态，关闭提示框
				btn.button("reset");
				dialog.modal("hide");
			}, "json");
		});
	}
	function changeTime(id) {
		
			$.post("/app/dwz/admin/update", {id: id}, function(data) {
				if(data.errno == 0) {
					datatable.ajax.reload(null, false);
				} else {
					Toast.error(data.errmsg);
				}
				//重置按钮状态，关闭提示框
				btn.button("reset");
				dialog.modal("hide");
			}, "json");
		
	}
	

	$(function() {
		initDatatable();
	});
</script>
{% endblock %}